<template>
  <div class="latestsupply">
    <ul>
      <li v-for="item in latestsupplyList" :key="item.id">
        <p class="title"><span>采购</span>{{item.title}}</p>
        <p class="address">期望产地：{{item.production}}</p>
        <p class="level">
          品质要求:
          <span v-for="value in item.qualityTag" :key="value">
            {{value}}
          </span>
        </p>
        <p class="long">
          <em>{{item.distance?item.distance+"km":"无"}}</em>
          <van-icon name="map-marked" size="20px" style="margin-right:8px" />
          <span>{{item.production}}</span>
          <strong v-for="value in item.requirement" :key="value">{{value}}</strong>
        </p>
        <p class="weight">
          {{item.unitPrice+"斤"}}
        </p>
      </li>
    </ul>
    <div class="more" @click="jumpList">
      点击加载更多<van-icon name="arrow" />
    </div>
  </div>
</template>
<script>
import { onMounted,ref } from 'vue';
import router from "../../router";
export default {
  setup(){
    const latestsupplyList=ref([]);
    const params=ref(router.currentRoute.value.params.ids);
    const getlatestsupply=(ids)=>{
      fetch("http://www.pudge.wang:5000/api/home/list",{
        method:"POST",
        body:JSON.stringify({status:ids}),
        headers:{'Content-Type' : 'application/json;charset=utf-8'}
      }).then(response=>response.json())
      .then(res=>{
        let arr=res.result;
        for(let item of arr){
          item.requirement=item.requirement.map((value)=>{
            if(value===1){
              value="企业认证"
            }else if(value===2){
              value="实名认证"
            }
            return value;
          });
          item.qualityTag=item.qualityTag.map((value)=>{
            if(value===1){
              value="纯天然"
            }else if(value===2){
              value="无添加"
            }else if(value===3){
              value="保质保量"
            }
            return value;
          })
        }
        let newArr=[];
        for(let i=0;i<3;i++){
          newArr.push(arr[i])
        }
        latestsupplyList.value=newArr;
      })
    }
    const jumpList=()=>{
      router.push('/listheader')
    }
    onMounted(()=>{
      getlatestsupply(params.value);
    })
    return {params,latestsupplyList,jumpList}
  }
}
</script>

<style scoped>
.latestsupply{
  width: 100%;
  box-sizing: border-box;
  background: #fbfbfb;
  padding-bottom:50px;
}
.latestsupply p{
  margin: 0;
  font-size: 18px;
  margin-bottom: 5px;
  color: #5d5d5d;
}
.latestsupply ul{
  padding: 10px 10px 0 10px;
  box-sizing: border-box;
}
.latestsupply ul li{
  width: 100%;
  background: #fff;
  margin-bottom: 10px;
  border-radius: 10px;
  padding: 10px;
  box-sizing: border-box;
}
.latestsupply .title{
  color: #333333;
  font-weight: 900;
}
.latestsupply .level{
  font-size: 14px;
}
.latestsupply .level span{
  margin-right: 5px;
  font-size: 16px;
}
.latestsupply .title span{
  width: 40px;
  height: 20px;
  color: #fff;
  background: #4cc79b;
  font-size: 15px;
  display: inline-block;
  text-align: center;
  line-height: 20px;
  font-weight: normal;
  border-radius: 5px;
  margin-right:5px
}
.latestsupply .address{
  font-size: 14px;
}
.latestsupply .long{
  font-size: 15px;
  margin-bottom: 20px;
}
.latestsupply .long em{
  margin-right: 10px;
}
.latestsupply .long strong{
  text-align: center;
  line-height: 16px;
  width: 65px;
  border-radius: 5px;
  height: 16px;
  border: 1px solid #4ddd89;
  color: #4ddd89;
  display: inline-block;
  margin: 0 5px;
}
.latestsupply .weight{
  color: #ff0000;
  font-weight: 900;
}
.latestsupply .more{
  width: 90%;
  height: 50px;
  background: #fff;
  margin-bottom: 20px;
  margin: 0 auto;
  border-radius: 10px;
  text-align: center;
  line-height: 50px;
  font-size: 20px;
}
</style>